<template>
  <div>
    <el-card class="box-card">
      <div v-for="v in list" :key="v.id" class="text item" @click="toPost(v.id)">
        <dl>
          <dd>
            <p>{{ v.nickname }}|{{ v.datetime }}</p>
            <h3>{{ v.title }}</h3>
            <p>{{ v.desc }}</p>
          </dd>
          <dt><img :src="v.rightUrl" alt=""></dt>
        </dl>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    axios.get("/api/remmend").then(resp => {
      console.log(resp.data);
      this.list = resp.data.data;
    });
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    toPost(id) {
      this.$router.push(`/home/post/${id}`)
    }
  }
};
</script>

<style scoped lang="scss">
dl {
  display: flex;
  border-bottom: 1px solid #ccc;
  dt {
    width: 150px;
    margin: 0 10px;
    img {
      width: 100%;
    }
  }
  dd{
    flex: 1;
  }
}
</style>